<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-02 10:23:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 23:25:18
-->
<template>
  <div id="footer">
    <div class="foot-bg">
      <div class="foot-wrap">
        <div class="foot-link">
          <dl>
            <dt>联系<span> / Contact</span></dt>
            <dd><a href="#" title="关于">关于本站</a></dd>
            <dd><a href="#" style="display: none">广告合作</a></dd>
            <dd><a target="_blank" href="#" rel="nofollow">在线投稿</a></dd>
            <dd><a href="#" rel="nofollow">在线留言</a></dd>
            <dd><a href="#" rel="nofollow">免责声明</a></dd>
            <dd><a href="#" rel="nofollow">加入我们</a></dd>
          </dl>
          <dl>
            <dt>友情链接<span> / Link</span></dt>
            <dd><a href="#" rel="nofollow">前端博客</a></dd>
            <dd><a href="#" rel="nofollow">前端技术</a></dd>
            <dd><a href="#" rel="nofollow">前端技术博客</a></dd>
            <dd><a href="#" rel="nofollow">Web前端开发</a></dd>
            <dd><a href="#" rel=" nofollow">网站地图</a></dd>
            <dd><a href="#" rel="nofollow">前端开发</a></dd>
            <dd><a href="#" rel="nofollow">网站建设</a></dd>
            <dd><a href="#" rel="nofollow">HTML5新增标签</a></dd>
            <dd><a href="#" rel="nofollow">ES6入门手册</a></dd>
            <dd><a href="#" rel="nofollow">Node.js教程</a></dd>
            <dd><a href="#" rel="nofollow">前端开发者手册</a></dd>
          </dl>
          <dl class="pr-link">
            <dt>前端热门标签<span> / Hot Tags</span></dt>
            <dd><a href="#">响应式设计</a></dd>
            <dd><a href="#">交互设计</a></dd>
            <dd><a href="#">APP网站设计</a></dd>
            <dd><a href="#">全屏网页设计</a></dd>
            <dd><a href="#">设计公司网站</a></dd>
            <dd><a href="#">产品设计</a></dd>
            <dd><a href="#">网页素材</a></dd>
            <dd><a href="#">UI素材</a></dd>
            <dd><a href="#">程序员自我学习</a></dd>
            <dd><a href="#">排版</a></dd>
            <dd><a href="http://www.shejidaren.com/tag/jquery">jQuery</a></dd>
            <dd><a href="http://www.shejidaren.com/tag/css3">CSS3</a></dd>
            <dd><a href="http://www.shejidaren.com/tag/html5">HTML5</a></dd>
          </dl>
        </div>
        <div class="foot-about">
          <p>
            我们热爱前端，虽然没有达到狂热的程度，但注定已经离不开，它就像有生命似的，改变着我们、激励着我们，而我们也坚信，前端设计能给用户带来更好的体验。我们需要细心和耐心、不断地学习新知识、不断研究出现的问题、关注用户体验、了解用户心理，希望本站能给您不一样的体验。<a
              href="#"
              >WELCOME</a
            >.
          </p>
          <div class="share">
            <p>
              如果你喜欢本站请分享给朋友和家人。 扫一扫，关注本站<br />
              <img src="/images/code1.png" width="150" alt="博客站" />
            </p>
          </div>
        </div>
      </div>
      <div class="copyright">
        本站主题采用 HTML5 + CSS3 构建。还涉及到vue的组件化和数据驱动
        <a href="#" rel="nofollow">Vue</a> ©2008-2021
        我们是团队合作开发。保留所有权利。<a
          href="#"
          rel="nofollow"
          target="_blank"
          >沪公网安备 1402430053 号</a
        ><br />举报电话：0111-88877766，举报邮箱：contact@boke.com
        <a href="#">boke</a>
      </div>
    </div>
  </div>
</template>

<style scoped>
#footer {
  position: relative;
  text-align: center;
  z-index: 103;
  padding: 20px 0 0;
  font-size: 12px;
  font-family: "PingFang SC", "Lantinghei SC", STheiti, Verdana, 微软雅黑, 宋体,
    Geneva, sans-serif;
}

.foot-wrap {
  position: relative;
  width: 1210px;
  margin: 0 auto;
  text-align: left;
  color: #a6a78b;
}

.foot-link {
  float: left;
  display: inline;
  width: 728px;
  overflow: hidden;
  margin-left: 30px;
}

.foot-link dl {
  float: left;
  width: 192px;
  margin-right: 30px;
  text-shadow: 0 1px 0 rgb(255 255 255 / 75%);
}

dl {
  display: block;
}

.foot-link dt {
  padding: 12px 0px;
  margin-bottom: 9px;
  color: #696b53;
  font-size: 14px;
  background: url(/images/foot-dt-bg.gif) repeat-x left bottom;
}

dd {
  display: block;
  width: 190px;
  padding-left: 2px;
}

#footer a:hover {
  color: #236898;
}

.foot-link dd a:hover {
  padding-left: 7px;
}

.foot-link dd a {
  transition: all 0.26s ease-out 0s;
}

.foot-link dl {
  float: left;
  width: 192px;
  margin-right: 30px;
  text-shadow: 0 1px 0 rgb(255 255 255 / 75%);
}

dt {
  display: block;
}

.foot-link .pr-link dd {
  float: left;
  width: 48%;
}

.foot-link dd a {
  display: block;
  overflow: hidden;
  padding-left: 2px;
  height: 24px;
  line-height: 24px;
  color: #abac97;
  -moz-transition: all 0.26s ease-out 0s;
  transition: all 0.26s ease-out 0s;
  text-decoration: none;
}

.foot-about {
  float: right;
  display: inline;
  width: 450px;
  padding-top: 53px;
  color: #abac97;
  text-shadow: 0 1px 0 rgb(255 255 255 / 75%);
  line-height: 24px;
}

.foot-about > p {
  text-indent: 2em;
}

.friend-link,
.friend-link a,
.copyright {
  color: #aaa;
}

.copyright {
  clear: both;
  padding: 25px 0;
  line-height: 2em;
  text-align: center;
  background: #4b0c77;
  color: #fff;
}
.copyright a {
  color: #fff;
}
</style>